<template>
  <vxe-table-column
    v-if="computedItem.checked || computedItem.checked === undefined"
    class="erp-page-table-column"
    :tree-node="treeNode"
    :title="computedItem.label"
    :field="computedItem.prop"
    :width="computedItem.width"
    :min-width="minWidth"
    :fixed="computedItem.fixed ? computedItem.fixed : ''"
    :align="computedItem.align"
    :edit-render="computedItem.editRender"
    :cell-render="computedItem.cellRender"
    :sortable="!!(computedItem.sortable)"
    :resizable="computedItem.resizable"
    :title-help="computedItem.titleHelp"
    :header-align="computedItem.headerAlign"
    :formatter="computedItem.formatter"
    :show-overflow-tooltip="computedItem.showOverflowTooltip"
    v-on="$listeners"
  >
    <template
      v-if="!computedItem.formatter"
      #default="{row}"
    >
      <span v-if="computedItem.template || computedItem.type">
        <slot
          v-if="computedItem.type === 'slot'"
          :row="row"
          :name="computedItem.prop + '__column_slot'"
        />
        <erp-view-item
          v-else
          :type="computedItem.type"
          :prop="computedItem.prop"
          :template="computedItem.template"
          :row-data="row"
          :extra="computedItem.extra"
          :value="row[computedItem.prop]"
        />
      </span>
      <span v-else-if="computedItem.showTextProp">{{ row[computedItem.showTextProp] }}</span>
      <span
        v-else-if="row[computedItem.prop] === null"
        class="not-set"
      />
      <span v-else>{{ row[computedItem.prop] }}</span>
    </template>

    <!--                &lt;!&ndash;        <slot name="header" slot="header" />&ndash;&gt;-->
    <!--        <template slot-scope="scope">-->
    <!--            <slot v-if="$slots.default" name="default" :row="scope.row" :item="computedItem"></slot>-->
    <!--            <span v-else>-->
    <!--                <span v-if="scope.row[computedItem.prop] === null" class="not-set">-->
    <!--                    (未设置)-->
    <!--                </span>-->
    <!--                <erp-view-item-->
    <!--                    v-else-->
    <!--                    :type="computedItem.type"-->
    <!--                    :prop="computedItem.prop"-->
    <!--                    :template="computedItem.template"-->
    <!--                    :row-data="scope.row"-->
    <!--                    :value="scope.row[computedItem.prop]"-->
    <!--                >-->
    <!--                    <template slot="operation">-->
    <!--                        <slot name="operation" :row="scope.row" />-->
    <!--                    </template>-->
    <!--                </erp-view-item>-->
    <!--            </span>-->
    <!--        </template>-->
  </vxe-table-column>
</template>

<script>
import Vue from 'vue';
import {Image, Table} from "element-ui";
const ErpViewItem = () => import('@/components/erp/ErpListView/ErpViewItem');
const {cloneJson, parseTime} = require("@/utils");
Vue.use(Image);
Vue.use(Table);
/**
 * 自定义全局的格式化处理函数
 * @author maolin
 */
export default {
  name: "ErpPageTableColumn",
  components: {
    ErpViewItem
  },
  props: {
    /**
     * 列配置，默认
     * @public
     * {
        align: 'left',
        checked: true,
        disabled: false,
        fixed: null,
        headerAlign: 'left',
        label: '',
        prop: '',
        resizable: false,
        showOverflowTooltip: true,
        sortable: false,
        type: 'text',
        width: 'auto',
        template: null,
        treeNode: false,
        titleHelp: null,
        minWidth: null,
        visible: true,
        footerAlign: null,
        editRender: null,
        cellRender: null,
        filterRender: null,
        filterMethod: null,
        formatter: null,
        showTextProp: null,
        extra: null,
      }
     */
    item: {
      type: Object,
      default () {
        return this.defaultItem;
      }
    },
    /**
     * 行数据
     * @public
     */
    rowData: {
      type: Object
    },
    /**
     * 当前列是否为树节点
     * @public
     */
    treeNode: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      defaultItem: {
        align: 'left',
        checked: true,
        disabled: false,
        fixed: null,
        headerAlign: 'left',
        label: '',
        prop: '',
        resizable: false,
        showOverflowTooltip: true,
        sortable: false,
        type: 'text',
        width: 'auto',
        template: null,
        treeNode: false,
        titleHelp: null,
        minWidth: null,
        visible: true,
        footerAlign: null,
        editRender: null,
        cellRender: null,
        filterRender: null,
        filterMethod: null,
        formatter: null,
        showTextProp: null,
        extra: null,
      }
    };
  },
  computed: {
    computedItem () {
      let item = this.item;
      let obj = cloneJson(this.defaultItem);
      return Object.assign(obj, item);
    },
    minWidth () {
      if (this.computedItem && this.computedItem.minWidth) {
        return this.computedItem.minWidth;
      }
      return 80;
    }
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
    .not-set{
        color: #c55;
        font-style: italic;
    }

</style>
